import axios from 'axios';
import React, { useEffect, useState } from 'react'

// hooks的规则：
// 1、函数名必须以use开头，用小驼峰（use后面紧跟的字母必须大写）
// 2、普通函数里不能调用hooks
// 3、hooks只能在组件里或者其它hooks里使用（调用）

function useProList() {
  const [count, setCount] = useState(1);
  const [limitNum, setLimitNum] = useState(10);
  const [proList, setProList] = useState([]);

  useEffect(() => {
    axios({
      url: "http://121.89.205.189:3000/api/pro/search",
      params: {
        count, limitNum
      }
    })
      .then(res => {
        if (res.data.code === "200") {
          setProList(res.data.data);
        }
      })
  }, [count, limitNum]);

  return {
    count, setCount,
    limitNum, setLimitNum,
    proList
  }
  
}

export default function Index() {
  const { count, setCount,
    limitNum, setLimitNum,
    proList } = useProList();

  return (
    <>
      <div>自定义hooks</div>
      页码：
      <input type="text" value={count} onChange={(ev) => setCount(ev.target.value)} /><br />
      每页的条数：
      <input type="text" value={limitNum} onChange={(ev) => setLimitNum(ev.target.value)} /><br />
      <hr />
      <h3>商品列表</h3>
      <ul>
        {
          proList.map(item => (
            <li key={item.proid}>{item.proid}</li>
          ))
        }
      </ul>

    </>
  )
}

